<template>
<div id="bkg">
    <el-row class = "top_box">
        <el-col :span="2">
            <el-button style="border-radius:20px;margin:5px 0px 0px 30px;box-shadow:0px 0px 20px #9370DB" @click="toIndex()"><i class="el-icon-caret-left" />首页</el-button>
        </el-col>
        <el-col :span="20" style="font-size:28px;letter-spacing:10px;color:#fbf8ff;margin-top:5px;text-align:center">
            我收到的答卷
        </el-col>
        <el-col :span="2">
        <el-avatar :size="50" style="font-size:30px;box-shadow:0px 0px 20px #9370DB" icon="el-icon-user-solid"></el-avatar>
        </el-col>
    </el-row>
    <el-container style="min-height:1000px">
        <!-- 顶部 -->
        <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px"
        style="background-color:rgba(162, 143, 202, 0.3); height:900px;margin-top:20px">
            <leftMenu
            :default-active="this.$router.path"
            @choosePath="choosePath"
            ></leftMenu>
        </el-aside>

        <el-main style="text-align: left;margin-left:50px;margin-top:30px;padding: 100px 0 0 250px">

        <el-row>
            <el-col :span="13">
            <template>
                <div class="el-button-group" style="float:left;box-shadow:0px 0px 10px #9370DB">
                    <slot>
                    <el-button type="success" style="width:105px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(0)">全部问卷</el-button>
                    <el-button type="success" style="width:90px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(1)">未过期</el-button>
                    <el-button type="success" style="width:90px; border-radius:0; margin-right:1px;font-size:16px" v-on:click="getTableState(2)">已过期</el-button>
                    </slot>
                </div>
            </template>
            </el-col>
            <el-col :span="11">
            <inputSearch 
            placeholder="请输入关键词" 
            v-model="keywords"
            @goSearch="searchKeywords"
            @selectField="selectField"
            :searchFields="searchFields"
            />
            </el-col>
        </el-row>
        
        <el-table
        :data="targetDataArr"
        border
        height="500"
        style="width: 1420px;font-size:18px"
        @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="45px" />
            <el-table-column
                prop="qname"
                label="问卷名称"
                width="220">
                <template slot-scope="scope">
                    <el-button @click="openQuestionnair(scope.row.qid)" type="text">
                            <p style="float:left;font-size:18px">{{scope.row.qname}}</p>
                            <i class="el-icon-search"></i>
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="问卷状态"
                width="170">
                <template slot-scope="scope">
                    
                    <el-button v-if="scope.row.state=='交卷'" @click="openAnswerList(scope.row)" type="text">
                            <p style="float:left;font-size:18px">{{scope.row.state}}</p>
                            <i class="el-icon-search"></i>
                    </el-button>
                    <div v-else-if="scope.row.state=='未交卷'"><p>{{scope.row.state}}</p></div>
                </template>
            </el-table-column>
            <el-table-column
                prop="public"
                label="结果公开"
                width="170">
            </el-table-column>
            <el-table-column
                prop="anonymous"
                label="答卷人"
                width="170">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.answerer" type="text" @click="selectAnswerer(scope.row.answerer)">
                        <p style="float:left;font-size:18px">{{scope.row.answerer}}</p>
                        <i class="el-icon-search"></i>
                    </el-button>
                    <div v-else-if="!scope.row.answerer" type="text">
                        <p style="float:left;font-size:18px">匿名</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="start_time"
                label="开始时间"
                width="220">
            </el-table-column>
            <el-table-column
                prop="end_time"
                label="结束时间"
                width="220">
            </el-table-column>
            <el-table-column
                label="操作"
                width="184">
                <template slot-scope="scope">
                    <el-button type="danger" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
                <el-button type="danger" style="width:150px; border-radius:0; margin-left=80px;font-size:16px;box-shadow:0px 0px 10px #9370DB"  @click="deleteAll">批量删除</el-button>
                <!-- <el-pagination
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, paper, next, jumper"
                    :total="1000"
                >
                </el-pagination> -->
        </el-row>
        </el-main>
        </el-container>
    </el-container>
</div>
</template>


<style>

#bkg {
    background: url("../pics/purple5.png");
    background-size: 100% 100%;
    height: 100%;
    background-attachment: fixed;
}

</style>


<script>
import leftMenu from '../components/myComponents/leftMenu'
import inputSearch from '../components/myComponents/inputSearch'
let allMyReceivedData = []
let targetDataArr = [].concat(allMyReceivedData)
let tableState = 0
let deleteDataId = []
let selectDataId = []
let keywords, searchFields, selectedField
export default {
    name: 'MyReceived',
    components:{
        inputSearch, leftMenu
    },
    data ()
    {
        return {
            allMyReceivedData,
            tableState,
            targetDataArr,
            deleteDataId,
            selectDataId:[],
            keywords:'',
            searchFields:['问卷名称','答卷人'],
            selectedField:''
        }
    },
    

    methods:{

        choosePath(key){
            switch (key) {
                case "myReceived":
                    break;
                case "statistics":
                    this.$router.push({path: '/statistics'})
                    break;
                case "myCreated":
                    this.$router.push({path: '/myCreated'})
                    break;
                case "myModels":
                    this.$router.push({path: '/myModels'})
                    break;
                default:
                    break;
            }
        },
        
        toIndex: function () {
            this.$router.push({path: '/admin'})
        },

        //返回满足tableState的数据
        getData: function(){
            
            //此刻时间nowTime
            let date = new Date()
            let month = date.getMonth()+1
            if(month<10){
                month = "0"+month
            }
            let nowTime = date.getFullYear()+"-"+month+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
            console.log("nowTime:"+nowTime)
            console.log("tableState:"+tableState)
            console.log("-----------")
            
            //所有
            if(tableState==0){
                this.targetDataArr = [].concat(allMyReceivedData)
            }

            //没过期的
            if(tableState==1){
                this.targetDataArr = []
                allMyReceivedData.forEach(element => {
                        if(element.end_time>nowTime){
                            this.targetDataArr.push(element)
                        }
                })
            }

            //过期的
            if(tableState==2){
                this.targetDataArr = []
                allMyReceivedData.forEach(element => {
                    if(element.end_time<=nowTime){
                        this.targetDataArr.push(element)
                    }
                })
            }
            return this.targetDataArr
            console.log("---现在所有的元素有"+allMyReceivedData.length+"项")
            console.log("---展示的元素有"+this.targetDataArr.length+"项")
            console.log("---------------------")
        },

        //选择搜索类型
        selectField: function(field){
            this.selectedField = field
        },

        //搜索事件
        searchKeywords: function(keywords){
            this.targetDataArr = [].concat(allMyReceivedData)
            let temp = []
            if(this.selectedField){    
                console.log(this.selectedField)
                if(this.selectedField=='问卷名称'){
                    this.targetDataArr.forEach(item => {
                        let title = item.qname
                        if(title.search(keywords)!==-1){
                            temp.push(item)
                        }
                    })
                }
                if(this.selectedField=='答卷人'){
                    this.targetDataArr.forEach(item => {
                        if(item.answerer){
                            let name = item.answerer
                            if(name.search(keywords)!==-1){
                                temp.push(item)
                            }
                        }
                    })
                }
                this.targetDataArr = [].concat(temp)
                return this.targetDataArr
            }
            else{
                this.$alert("请选择搜索类型","提示",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
        },

        //查看问题列表
        openQuestionnair: function(id) {
            this.$router.push({path: '/answer', query: {questionnaire_id: id}})
        },

        //查看答卷按钮
        openAnswerList: function(item) {
            let itemqname = item.qname
            let m = allMyReceivedData.indexOf(item) //答卷数组索引
            let output = ""
            if(allMyReceivedData[m].answers){
                console.log(allMyReceivedData[m].answers)
                let len = allMyReceivedData[m].answers.length
                console.log(len)
                for(let q=0;q<len;q++){
                    let question = allMyReceivedData[m].answers[q].qcontent
                    let answer = allMyReceivedData[m].answers[q]
                    let qadd1 = q+1
                    let typeCh
                    console.log("type"+answer.qstype)

                    {
                        if(answer.qstype=='0'){
                            typeCh = "单选"
                        }
                        if(answer.qstype=='1'){
                            typeCh = "多选"
                        }
                        if(answer.qstype=='2'){
                            typeCh = "文字题"
                        }
                    }

                    output = output+"<br /><p>第"+qadd1+"题："+"("+typeCh+")"+question+"</p>"
                    if(typeCh=="文字题"){
                        output += "<p>"+answer.input+"</p>"
                    }
                    if(typeCh=="单选"){
                        output += "<p>"+answer.selected_options+"</p>"
                    }
                    if(typeCh=="多选"){
                        let list = Array.from(allMyReceivedData[m].answers[q].selected_options);
                        list.forEach(element => {
                            output = output+"<p>"+element+"</p>"
                        });
                    }
                }
            }
            if(output){
                this.$alert(output,itemqname,{
                    confirmButtonText: '确定',
                    center: false,
                    dangerouslyUseHTMLString: true,
                    callback: () => {}
                })
            }
            else{
                this.$alert("暂无数据","提示",{
                    confirmButtonText: '确定',
                    center: true,
                    callback: () => {}
                })
            }
        },

        //查看员工所有答卷按钮
        selectAnswerer: function(employee_name){
            console.log(employee_name)
            let temp = []
            allMyReceivedData.forEach(item => {
                if(item.answerer){
                    let name = item.answerer
                    if(name==employee_name){
                        temp.push(item)
                    }
                }
            })
            console.log(temp)
            this.targetDataArr = [].concat(temp)
            return this.targetDataArr
        },

        //click:选类型
        getTableState: function(x){
            //清空目前数据列表
            let arr = []
            this.targetDataArr = [].concat(arr)
            tableState = x
            //tableState更新后重新执行getData
            this.getData()
            return tableState
        },
        

        //click:删除一项
        deleteItem: function(item){
            let n = allMyReceivedData.indexOf(item)
            if(n==-1){
                return
            }
            allMyReceivedData.splice(n, 1)
            this.getData()
        },
        

        //多选
        handleSelectionChange: function(items){
            let arr = []
            this.selectDataId = arr
            items.forEach(item => {
                this.selectDataId.push(allMyReceivedData.indexOf(item))
            })
            console.log(this.selectDataId)
        },


        //删除所选全部
        deleteAll: function(){
            this.selectDataId.forEach(item => {
                allMyReceivedData.splice(item, 1)
            })
            this.getData()
        }

    },

    mounted(){
        this.$http.get('/getReceivedList').then(res => {
            allMyReceivedData = res.data.data
            console.log("receivedList:")
            console.log(allMyReceivedData)
            this.getData()
        })
    }
}
</script>
